<template>
  <div class="fucking-container">
    <el-row :gutter="20" style="margin-top:20px;">
      <el-col :span="14">
        <detailTitle title="门店推荐"></detailTitle>
        <div style="height: 270px;overflow-y: scroll; background-color: #fff;">
          <el-table :data="chooseSale">
            <el-table-column
              align="center"
              prop="commodity_name"
              label="产品"
            ></el-table-column>
            <el-table-column align="center" label="数量" width="100">
              <template slot-scope="{row}">
                <el-input-number
                  :value="row.number"
                  style="width:90px !important"
                  :min="1"
                  :step="1"
                  size="mini"
                  @input="handleRowChange(row, {number: $event})"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="price"
              label="单价"
            ></el-table-column>
            <el-table-column align="center" prop="now_price" label="现价">
              <template slot-scope="{row}">
                <el-input
                  :value="row.now_price"
                  style="width:100px"
                  @input="handleRowChange(row, {now_price: $event})"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="all_price"
              label="总价"
            ></el-table-column>
            <el-table-column align="center" width="70" label="操作">
              <template slot-scope="scope">
                <div
                  style="color:red;cursor:pointer"
                  @click="del(scope.row.id)"
                >
                  <i class="el-icon-delete"></i>
                  <!-- 删除 -->
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="white-block">总计：{{ totalPrice }}元</div>
      </el-col>
      <el-col class="product-list" :span="10">
        <detailTitle title="门店产品" :check="false"></detailTitle>
        <el-checkbox-group v-model="chooseProduct">
          <el-checkbox v-for="item in product" :key="item.id" :label="item.id"
            ><template>
              {{ item.commodity_name
              }}<span style="position: absolute; right: 80px;">{{
                item.price
              }}</span>
            </template></el-checkbox
          >
        </el-checkbox-group>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="btn-box">
      <el-col :span="14">
        <div>
          <el-form inline>
            <el-form-item style="margin-bottom:0" label="请选择技师">
              <el-select v-model="masseur_id">
                <el-option
                  v-for="item in doctors"
                  :key="item.id"
                  :label="item.truename"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="btn" @click="save">发送</div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import detailTitle from './detailTitle';
import toast from '@/toast';

export default {
  components: {
    detailTitle
  },
  props: {
    product: [Array],
    doctors: [Array],
    recommendProductId: [Array],
    id: {},
    record_id: {},
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chooseProduct: [],
      masseur_id: '',
      options: []
    };
  },
  computed: {
    chooseSale() {
      return this.product.filter(it => {
        return this.chooseProduct.includes(it.id);
      });
    },
    totalPrice() {
      this.chooseSale.forEach(it => {
        if (+it.now_price < 0) {
          it.now_price = '0.00';
        }
        it.all_price = +it.now_price * +it.number;
      });
      if (this.chooseSale.length === 0) {
        return 0;
      }
      return this.chooseSale.map(it => +it.all_price).reduce((a, b) => a + b);
    }
  },
  watch: {
    recommendProductId(val) {
      this.chooseProduct = val;
    }
  },
  methods: {
    del(id) {
      this.chooseProduct.forEach((it, i) => {
        if (it === id) {
          this.chooseProduct.splice(i, 1);
        }
      });
    },
    saveDetail() {
      const params = {
        u_id: this.id,
        record_id: this.record_id,
        masseur_id: this.masseur_id,
        hand_type: 1,
        goods_arr: this.chooseSale
          .filter(it => !!it.all_price)
          .map(it => ({
            price: it.now_price,
            number: it.number,
            id: it.id
          }))
      };
      this.$http
        .post(this.$url.saveDetail, params)
        .then(res => {
          this.$emit('next');
          toast('操作成功');
        })
        .catch(this.$catch);
    },
    save() {
      if (this.type) {
        this.$http
          .post(this.$url.testSum, {
            u_id: this.id,
            masseur_id: this.masseur_id,
            goods_arr: this.chooseSale
              .filter(it => !!it.all_price)
              .map(it => ({
                price: it.now_price,
                number: it.number,
                id: it.id
              }))
          })
          .then(res => {
            this.$emit('next');
            toast('操作成功');
          })
          .catch(this.$catch);
        return;
      }
      this.saveDetail();
    },
    handleRowChange(row, data) {
      console.log(row.number, data);
      Object.assign(row, data);
      this.$emit('update:product', [...this.product]);
    }
  }
};
</script>
<style lang="scss">
.product-list {
  .el-checkbox-group {
    padding: 10px 20px;
    background-color: #fff;
    height: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
    .el-checkbox {
      height: 30px;
      display: flex;
      align-items: center;
      position: relative;
      color: #333;
      margin-right: 0;
      font-size: 16px;
      margin-bottom: 10px;
      .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #409eff;
        font-size: 16px;
      }
      .el-checkbox__label {
        font-size: 16px;
      }
    }
  }
}
.white-block {
  background-color: #fff;
  font-size: 16px;
  text-align: right;
  height: 50px;
  line-height: 50px;
  box-sizing: border-box;
  padding-right: 20px;
}
.fucking-container {
  .el-table {
    font-size: 16px;
  }
  .el-form {
    .el-form-item__label,
    .el-form-item__content {
      font-size: 16px;
    }
  }
  .btn-box {
    margin-top: 20px;
    display: flex;
    align-items: center;
    height: 80px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0 20px;
    .btn {
      width: 180px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      font-size: 16px;
      border-radius: 20px;
      background-color: #409eff;
      cursor: pointer;
    }
  }
}
</style>
